*{
    margin: 0;
    padding: 0;
   
}
body{
    // 设置body的宽度最大为750px,最小为320px
    min-width: 320px;
    max-width: 750px;
    // 设置实际的宽度为10个rem,因为我们的设计稿为750px,flex.js将宽分为十份，每份就为75px,将每份的大小设为html字体大小75px,那么1rem就是75px
    // 因为js文件已经给我们划分好了份数，所以当屏幕尺寸不同的时候，尺寸/10=字体大小，所以rem换算过来的px也会不一样
    width: 10rem;
    margin:0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
    // box-sizing: border-box;

} 

/* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */

@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}
// 当屏幕小于320px,为了能看清，我们不再缩小页面，将html字体大小设置死，为35px
@media screen and (max-width: 320px) {
    html {
        font-size: 32px!important;
    }
}
input{
    outline: none;
    border: none;
}
li{
    list-style: none;
}
a{

    text-decoration: none;
}
i{
    font-style: normal;
}

   header{
       position: relative;
        height: 1.2rem;
        width: 100%;
        background: url(../imges/header.jpg)no-repeat;
        background-size: 100% 1.2rem ;
        &::before{
            position: absolute;
            left: .36rem;
            top: 50%;
            transform: translateY(-50%);
            content: '';
            width: .4rem;
            height: .4rem;
            background: url(../imges/x.png)no-repeat;
            background-size: .4rem .4rem;
        }
    }
    nav{
        height: 2.4rem;
        background: url(../imges/背景.png)no-repeat;
        background-size:100% 2.4rem;
        display: flex;
        flex-direction: column;
        .login{
            flex: 1;
            .center{
                width: 9.093333rem;
                height: 1.2rem;
                margin: 0 .453333rem;
                // background-color: blue;
                display: flex; 
                justify-content: space-between;
               align-items:center;
                .my{
                width: .48rem;
                height: .8rem;
               
                }
                .hao{
                    width: 5.2rem;
                    height: 1.013333rem;
                    margin-bottom: 0px;
                }
                .logins{
                width: .48rem;
                height: .8rem;
                }
            }
        }
        .search{
            flex: 1;
            display: flex;
            justify-content: center;
             .s{
                 position: relative;
                 width: 9.36rem;
                 height: 1.173333rem;
               display: flex;
              align-items: center;
                .in{position: relative;
                    width: 9.36rem;
                    height: .853333rem;
                        background: #FFF;
                        border-radius: .426667rem;
                            font-size: .333333rem;
    color: #999999;
text-indent: .8rem;
             }
             i{
                 position: absolute;
                 margin-left: .266667rem;
                 width: .48rem;
                 height: .48rem;
                 background: url(../imges/搜索.png)no-repeat;
                 background-size: .48rem .48rem;
             }
            
   
    }
}
        }
        // 轮播图
        .lunbot{
    width: 100%;
    height: 3.053333rem;
    background: url(../imges/背景2.png)no-repeat;
    background-size: 100%;
    ul{
margin: 0 0;
position: relative;
    li{
        overflow: hidden;
        position: absolute;
        width: 9.36rem;
        height: 3.053333rem;
        border-radius: .266667rem;
        // background: url(../imges/lunbot.png)no-repeat;
        // background-size: 9.36rem 3.053333rem;
        left: .306667rem;
        img{
width: 100%;
transform: translate( 0,-1.466667rem );

        }
    }
}
}
// 品牌日
.guang{
width: 100%;
height: 2.666667rem;
background: url(../imges/pinpairi.gif)no-repeat;
background-size: 100% 2.666667rem;
}
article{
    width: 100%;
    height: 4.106667rem;

    li{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        a{
            position: relative;
            height: 2rem;
width: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 1.12rem;
                height: 1.12rem;
            }
            div{
                position: absolute;
            font-size: .266667rem;
            color: #666;
            bottom: 0;
            }
        }
    }

}
.g{
    width: 100%;
    height: 3.12rem;
    margin-top: .6rem;
    display: flex;
.f{
    flex: 1;
    background: url(../imges/省钱卡.png)no-repeat;
    background-size: 100%;
}
.s{
    flex: 1;
    display: flex;
    .left{
        flex: 1;
        background: url(../imges/省钱卡1.png)no-repeat;
        background-size: 100%;
    }
    .right{
        flex: 1;
        margin-left: .066667rem;
        background: url(../imges/省钱卡2.png)no-repeat;
        background-size: 100%;
    }
}
}
// 限时秒杀
aside{
    
height: 3.44rem;
width: 9.36rem;
margin: .32rem .32rem;
 background-color:rgb(255, 255, 255) ;
 border-radius: .266667rem .266667rem 0 0;
 margin-bottom: 0;
ul{
    display: flex;
    height: 100%;
   
    li{
       
     width: 4.666667rem;
        height: 100%;
   &:nth-child(1){
      border-right: .013333rem dotted rgb(242, 242, 242);
  }
    &:nth-child(2){
      border-left: .013333rem dotted rgb(242, 242, 242);
  }
  .title{
      height: .773333rem;
      display: flex;
      width: 100%;
          
      h4{ 
           width: 1.733333rem;  
           font-size: .373333rem;
           font-weight: 900;
           color: #333;
           padding: .24rem 0 0 .32rem;
           vertical-align: bottom;
      }
      .count{
          width: 1.733333rem;
          display: flex;
          align-items: flex-end;
          font-size: .266667rem;
          font-weight: 700;
          span{

              display: block;
              width: .466667rem;
              height: .4rem;
              background-color: rgb(255, 204, 0);
              border-radius: .133333rem;
              text-align: center;
              line-height:.4rem;
          }
          i{
            margin-bottom: .026667rem;
          }
      }
  }
  .renqi{
      font-size: .32rem;
      color: #999999;
      margin: .053333rem 0 0 .32rem;
  }
  .pic{
      box-sizing: border-box;
      height: 2.133333rem;
      width: 350px;
      padding: .066667rem 0 0 .373333rem;
      display: flex;

.r{
    margin-left: .833333rem;
}
div{

    img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .pr{
font-size: .293333rem;
color: #f50;
text-align: center;
    }
}

  }
    }
 
  
}
}
.two{
    margin: 0 .32rem 0 .32rem ;
    border-radius:0 0 .266667rem .266667rem ;
}
// 推荐榜单
.tj{
    width: 100%;
}
.tjbd{
  width: 100%;
    height: 3.013333rem;
    display: flex;
    justify-content: center;
    .bd{
        display: flex;
        width: 9.36rem;
        height: 100%;
 
 justify-content: space-between;
 li{
     position: relative;
     width: 3.013333rem;
     height: 3.533333rem;
     border-radius: .133333rem;
     img{
         width: 2rem;
         height: 2rem;
         margin: .2rem  .506667rem 0;
     }
     span{
         position: absolute;
         display: block;
         width: 1.333333rem;
         height: .453333rem;
         line-height:.453333rem ;
         left: 50%;
         text-align: center;
         transform: translate(-50%,-50%);
        color: #D9A87A;
        border-radius: .34rem;
        border: .04rem solid #D9A87A;
        font-size: .293333rem;
        color:#D9A87A ;
            background: #FFF;
     }
     .bottom{
         overflow: hidden;
         width: 100%;
         height: 1.24rem;
         background: url(../imges/推荐好物背景.png)no-repeat;
         background-size: 100%;
        h3{
            font-size: .346667rem;
            color: #FFF;
            text-align: center;
            margin-top: .266667rem;
        }
        p{
            font-size: .293333rem;
            color: #fff;
            text-align: center;
        }
     }
    }
 }
    }
    // 猜你喜欢
.xh{
    width: 9.36rem;
    height: .8rem;
    margin: 1.066667rem .32rem 0;
}
.dx{
    width: 9.36rem;
    margin: 0 .32rem;
 
    ul{
           display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
       li{
        width: 4.56rem;
        height: 7.226667rem;
        background-color:rgb(255, 255, 255);
        margin: 0 0 .24rem;
border-radius: .133333rem;
overflow: hidden;
img{
    width: 4.56rem;
    height: 4.56rem;
}
.bt{
    box-sizing: border-box;
    width: 100%;
    height:  .906667rem;
    margin:  .24rem 0 0 0;
    padding: 0 .16rem 0;
    color: #333;
    font-size: .346667rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.baoy{
    width: 3.586667rem;
    height: .32rem;
    margin: .146667rem .16rem .32rem;
    display: flex;
    .baoyou{
        width: .826667rem;
        height: .32rem;
        border: .013333rem solid #FFBB00;
            background: #FEFBEE;
            border-radius: .066667rem;
            line-height: .32rem;
            margin-left: .066667rem;
            text-align: center;
            color: #333;
            font-size: .24rem;
    }
    .jl{
            margin-left: .066667rem;
        width: 1.36rem;
        height: .32rem;
        border: .013333rem solid #FFBB00;
            background: #FEFBEE;
 border-radius: .066667rem;
            line-height: .32rem;
            text-align: center;
 color: #333;
            font-size: .24rem;
    }
}
.footer{
    width: 4.4rem;
    height: .506667rem;

    margin-left: .16rem;
    display: flex;
        color: #FF4422;
    font-weight: bold;
    align-items: flex-end;
    line-height: 1;
    
    .o{
        font-size: .32rem;
 padding-bottom: .013333rem;

    }
    .tw{
       font-size:  .48rem;
    }
    .h{
font-size: .32rem;
 padding-bottom: .026667rem;
    }
    .f{
       font-size: .266667rem; 
       color: #999;
       align-self: center;
       margin-left: .173333rem;
      font-weight: 400;
    }
}
    }  
    }
   
}
// 脚本
footer{
    position: fixed;
    bottom: 0;
width: 10rem;
height: 1.333333rem;
background-color: rgb(255, 255, 255);
display: flex;

a{
    flex: 1;
    text-align: center;
    img{
        align-items: center;
        width: .64rem;
        height: 48px;
margin: .16rem .68rem 0;
    }
    span{
        color: #666;
        font-size: .266667rem;
        font-weight: 400;
    }
    &:nth-child(1){
        span{
             color: #000;
             font-weight: 700;
        }
    }
}
}

